<extend name="common" />
<block name="main">
<div class="signup-main">
    <div class="signup-hd txt-grey">用户注册</div>
    <div class="signup-bd clear">
        <form id="registerForm" method="post" data-validate="false" class="form-horizontal"
          data-bv-message="This value is not valid"
          data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
          data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
          data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

        <div class="form-group">
            <label class="col-lg-3 control-label">用户名</label>
            <div class="col-lg-9">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" autocomplete="off"
                 data-bv-message="The username is not valid"
                 required data-bv-notempty-message="用户名必填且不能为空"
                 pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="用户名不能包含特殊字符和汉字"
                 data-bv-stringlength="true" data-bv-stringlength-min="4" data-bv-stringlength-max="30" data-bv-stringlength-message="用户名长度必须在4-30之间"
                 data-bv-different="true" data-bv-different-field="password" data-bv-different-message="用户名和密码不能相同"
                 data-bv-remote="true" data-bv-remote-url="{:U('Passport/checkUserName')}" data-bv-remote-message="该用户名已存在">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label">密码</label>
            <div class="col-lg-9">
                <input type="password" class="form-control" id="inputPassword" name="password" placeholder="请输入密码"
                required data-bv-notempty-message="密码必填且不能为空"
                data-bv-identical="true" data-bv-identical-field="confirm_pwd" data-bv-identical-message="两次密码输入不一致"
                data-bv-different="true" data-bv-different-field="username" data-bv-different-message="用户名和密码不能相同">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label">确认密码</label>
            <div class="col-lg-9">
                <input type="password" class="form-control" id="confirm_pwd" name="confirm_pwd" placeholder="请输入密码"
                required data-bv-notempty-message="密码必填且不能为空"
                data-bv-identical="true" data-bv-identical-field="password" data-bv-identical-message="两次密码输入不一致"
                data-bv-different="true" data-bv-different-field="username" data-bv-different-message="用户名和密码不能相同">
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-2 col-lg-offset-3">
                <button type="submit" class="btn btn-primary btn-submit">注册</button>
            </div>
            <div class="col-lg-7 control-label">
              <a href="login">已有账号?去登录→</a>
            </div>
        </div>
    </form>
    </div>
</div>
<script>
$(function(){
  $('form').bootstrapValidator({
    message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
                username: {/*键名username和input name值对应*/
                    message: '无效的用户名',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 4,
                            max: 30,
                            message: '用户名长度必须在4到30之间'
                        }/*最后一个没有逗号*/
                    }
                },
                password: {
                    message:'密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }
                    }
                },
            }
  });
})
</script>
</block>